<script setup lang="ts">
import { timeFormatter } from '@/utils/timeHandlers'
import { useResourceStore } from '@/stores/useResource'
import type { FormInstance } from 'element-plus'
import DlgResourceCreateOrEdit from './DlgResourceCreateOrEdit.vue'
import { deleteResource } from '@/api/resources'
const useResource = useResourceStore()
// 查询表单
const queryRef = ref<FormInstance>()
// 对话框组件
const DlgCreateOrEdit = ref<InstanceType<typeof DlgResourceCreateOrEdit> | null>()
onMounted(() => {
  useResource.queryResources()
  useResource.getAllResourcesCategory()
})
// 删除资源
const handleDelete = async (id: number) => {
  await ElMessageBox.confirm('确认要删除该行记录吗？', '删除询问', { type: 'warning' }).catch(() => {
    ElMessage.info('已取消删除')
    // 正常返回 不往下执行
    return new Promise(() => {})
  })
  // 确认删除
  const { data } = await deleteResource(id)
  if (data.code === '000000') {
    ElMessage.success('资源删除成功！')
    useResource.queryResources({ current: 1 })
  } else {
    ElMessage.error('资源删除失败！')
    throw new Error('资源删除失败！')
  }
}
</script>
<template>
  <div class="resource">
    <el-card class="box-card">
      <template #header>
        <el-form ref="queryRef" :inline="true" :model="useResource.queryCondition" class="demo-form-inline">
          <el-form-item label="资源名称" prop="name">
            <el-input v-model="useResource.queryCondition.name" placeholder="资源名称" clearable />
          </el-form-item>
          <el-form-item label="资源分类" prop="categoryId">
            <el-select v-model="useResource.queryCondition.categoryId" placeholder="资源分类" clearable>
              <el-option label="不限" value="" />
              <el-option :label="cate.name" :value="cate.id" v-for="cate in useResource.allResourcesCategory" :key="cate.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="资源路径" prop="url">
            <el-input v-model="useResource.queryCondition.url" placeholder="资源路径" clearable />
          </el-form-item>
          <el-form-item>
            <el-button @click="queryRef?.resetFields()">重置</el-button>
            <el-button type="primary" @click="useResource.queryResources()">查询搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="default" size="large" @click="DlgCreateOrEdit?.iniAndShow()"> 添加资源</el-button>
            <el-button type="default" size="large" @click="$router.push({ name: 'resourceCategory' })"> 资源类别</el-button>
          </el-form-item>
        </el-form>
      </template>
      <div>
        <el-table :data="useResource.queryResult.records" border style="width: 100%">
          <el-table-column type="index" label="编号" width="80" align="center" />
          <el-table-column prop="name" label="资源名称" align="center" />
          <el-table-column prop="url" label="资源路径" align="center" />
          <el-table-column prop="description" label="描述" align="center" />
          <el-table-column prop="createdTime" label="添加时间" :formatter="timeFormatter" align="center" />
          <el-table-column label="操作" align="center" v-slot="{ row }">
            <el-button type="primary" @click="DlgCreateOrEdit?.iniAndShow(row.id)"> 编辑</el-button>
            <el-button type="danger" @click="handleDelete(row.id)">删除</el-button>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          v-model:current-page="useResource.queryCondition.current"
          v-model:page-size="useResource.queryCondition.size"
          :page-sizes="[5, 10, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="useResource.queryResult.total"
          @size-change="(pageSize) => useResource.queryResources({ size: pageSize, current: 1 })"
          @current-change="(current) => useResource.queryResources({ current })"
        />
      </div>
      <!-- 新增编辑对话框 -->
      <DlgResourceCreateOrEdit ref="DlgCreateOrEdit" />
    </el-card>
  </div>
</template>
<style scoped lang="scss">
.resource {
  color: #000;
}
.box-card {
  width: auto;
}
.el-table {
  margin-top: 17px;
}
.el-pagination {
  margin-top: 17px;
}
</style>
